<template>
  <div>
    <ul class="list" v-if="word.length > 0">
      <li v-for="item in word" :key="item.id">
        <div>{{ item.text }}</div>
        <div><van-icon name="arrow" /></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    word: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  padding-top: 60px;
  background-color: rgba(255, 255, 255, 0.973);
  font-size: 16px;
  color: #323232;
  li {
    padding: 10px 0;
    padding-left: 10px;
    border-bottom: 1px solid #fafafa;
    display: flex;
    justify-content: space-between;
  }
}
</style>